<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
	<th:block th:include="include :: header('新增app账号')" />
	<th:block th:include="include :: ztree-css" />
</head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-account-add">
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">手机号：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="phoneNum" id="phoneNum" style="height: 34px;" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">验证码：</label>
				<div class="col-sm-8" style="display: flex">
					<div style="flex: 1;margin-right: 10px;position: relative;">
						<input class="form-control" type="text" name="verifyCode" id="verifyCode" required style="height: 34px;">
					</div>
					<a class="btn btn-success" onclick="sendSms(this)" >
						获取验证码
					</a>
				</div>
			</div>
		</form>
	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: ztree-js" />
	<script type="text/javascript">
	    $(function() {
		});

		$.validator.addMethod('isMobile', function (value, element) {
			var length = value.length
			var reg = /^1[3456789]\d{9}$/;
			console.log(this.optional(element), length, reg.test(value))
			return this.optional(element) || (length == 11 && reg.test(value))
		})

		$("#form-account-add").validate({
			rules:{
				onkeyup: false,
				phoneNum:{
					minlength: 11,
					isMobile: true,
				},
			},
			messages: {
		        "phoneNum": {
		            required: "请输入手机号",
					minlength: "不能少于11个字符",
					isMobile: "请输入正确的手机号",
		        },
		    },
		    focusCleanup: true
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
	        	add();
	        }
	    }
	
		function add() {
			var phone = $("input[name='phoneNum']").val();
			var code = $("input[name='verifyCode']").val();
			$.ajax({
				cache: true,
				type: "POST",
				url: ctx + "system/app/login",
				dataType: "json",
				contentType: "application/json",
				data: JSON.stringify({
					phone: phone,
					code: code,
				}),
				async: false,
				error: function(req) {
					$.modal.msg('登录失败')
				},
				success: function (data) {
					$.operate.successCallback(data);
				},
			})
		}

		function countDown(ele) {
			var time = 120;
			$(ele).addClass("disabled");
			var timer = setInterval(() => {
				time --;
				if (time == 0) {
					$(ele).removeClass("disabled");
					$(ele).html("获取验证码");
					clearInterval(timer)
				} else {
					$(ele).html("重新发送(" + time + ")");
				}
			}, 1000);
		}

		function sendSms(ele) {
			var status = $("#form-account-add").validate().element($("#phoneNum"));
			console.log(ctx)
			if (!status) return
			var phone = $("input[name='phoneNum']").val();
			$.ajax({
				cache: true,
				type: "POST",
				url: ctx + "system/app/sendSms",
				dataType: "json",
				contentType: "application/json",
				data: JSON.stringify({
					phone: phone,
				}),
				async: false,
				error: function(req) {
					$.modal.msg('获取验证码失败')
				},
				success: function (data) {
					countDown(ele);
				},
			})
		}
	</script>
</body>
</html>
